<template>
    <div id="search">
        <head-tip title='搜贴'></head-tip>
        <section class="content">
            <div class="content-img">
                <img src="../../assets/image/logo.png">
                <p>您身边的人都在使用的名帖</p>
            </div>
            <div class="content-search">
                <div class="to-check">
                    <el-radio v-model="type" label="1">个人名帖</el-radio>
                    <el-radio v-model="type" label="0">公司名帖</el-radio>
                </div>
                <div class="to-search">
                    <el-input size="medium" class="searchInput" placeholder="输入您要搜索的名帖" v-model="searchVal" clearable>
                    </el-input>
                    <div class="to-search=-bnt">
                        <el-button type="primary" icon="el-icon-search" @click="toSearchList">搜索</el-button>
                    </div>
                </div>
                <div class="hot-search">
                    <el-tag size="medium" type="info">热门搜索：</el-tag>
                    <span class="el-tag el-tag--mini" v-for="(item,key) in hottags" @click="toTagList(item.ctagname)"  v-if="key<5&&item.ctagname" :key="key" size="mini" data-id="item.id">{{item.ctagname}}</span>

                </div>
            </div>
        </section>
    	<foot></foot>
    </div>
</template>

<script>
import {getHotTags} from './index.js'
import foot from '@/components/common/foot.vue'
import headTip from '@/components/common/head.vue'
import {footNav} from '@/params/foot.js'
export default {
    data () {
      return {
        type: "1",
        searchVal:'',
        hottags:[]
      };
    },
    methods:{
        toSearchList(){
            this.$router.push({path:"/search/searchList",query:{text:this.searchVal,itype:this.type}})
        },
        toTagList(val){

            this.$router.push({path:"/search/searchList",query:{text:val}})
        }
    },
    components:{
    	foot,
        headTip
    },
    created(){
        for(let i=0;i<footNav.length;i++){
            if(this.$route.query.type === undefined){
                this.$route.query.type = 0;//重定向时没有参数，给type赋值为1
            }
            if(i == this.$route.query.type){
                this.$store.commit('changeHeadTip',{val:footNav[i].tip});
                break;
            }
        }
    },
    mounted(){
        let self = this;
        let responseData = getHotTags();
        responseData.then((res)=>{
            if(res.result == 1){
                 self.hottags=res.data.list
            }else{

            }
        })
    }
}
</script>
<style>
	#search .el-radio__input.is-checked .el-radio__inner{ background: #1ACCAC; border-color:#00AA76;}
	#search .el-radio__input.is-checked+.el-radio__label{ color:#00AA76 ;}
	#search .el-input__inner{ background: #f1f1f1; border-radius: 0px !important; border: 0px; height: 2.5rem; line-height: 2.5rem;}
	#search .el-button--primary{ background: #00AA76; border: 0px;}
	#search .el-radio__label{ padding-left: 5px;}
</style>

<style scoped>
#search {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: -moz-linear-gradient(top, #f9f9f9 0%, #fff 40%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(40%,#fff));
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#fff 40%);
    background: -o-linear-gradient(top, #f9f9f9 0%,#fff 40%);
    background: -ms-linear-gradient(top, #f9f9f9 0%,#fff 40%);
    background: linear-gradient(to bottom, #f9f9f9 0%,#fff 40%);
}
.content{
    padding: 3rem 0 3.5rem 0;
}
.content-img{
    position: relative;
}
.content-img img{
    width: 44%;
    margin-top: 4rem;
}
.content-img p{
    margin-top: .5rem;
    transform:scale(1);
    font-size: .8rem;
    color:#909399;
}

.content-search{ margin-top:8rem;}

.to-check{
    margin-top: 1rem;
}
.to-search{
    display: flex;
    width: 80%;
    margin: auto;
    margin-top: 1rem;
}
.to-search div{
    font-size: 1rem;
}
.el-button{
    padding: 0 1rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 0 0.3rem 0.3rem 0;
}
.hot-search{
    margin: 1rem auto;
    padding: 0 2.5rem;
    text-align: left;
}
#search .el-tag{ border: 0px; border-radius: 0px; padding: 0px;}
#search .el-tag--info{ background: #fff;}
#search .el-tag--mini{background: #00AA76; color: #fff; height:1.2rem; padding: 0rem .5rem; line-height: 1.2rem; font-size: .7rem;margin: 5px;}
</style>
